<template>
  <div class="app-container">
    <h1>Vue3 组件库开发示例</h1>
    
    <h2>Button 组件示例</h2>
    <div class="button-group">
      <Button>默认按钮</Button>
      <Button type="primary">主要按钮</Button>
      <Button type="success">成功按钮</Button>
      <Button type="warning">警告按钮</Button>
      <Button type="danger">危险按钮</Button>
    </div>
    
    <div class="button-group" style="margin-top: 10px;">
      <Button size="large">大型按钮</Button>
      <Button size="medium">中型按钮</Button>
      <Button size="small">小型按钮</Button>
      <Button size="mini">迷你按钮</Button>
    </div>
    
    <div class="button-group" style="margin-top: 10px;">
      <Button disabled>禁用按钮</Button>
      <Button loading>加载中按钮</Button>
      <Button type="primary" plain>朴素按钮</Button>
    </div>
    
    <h2 style="margin-top: 30px;">Input 组件示例</h2>
    <div class="input-group">
      <Input 
        v-model="inputValue" 
        placeholder="请输入内容"
        style="width: 300px;"
      ></Input>
      
      <Input 
        v-model="password" 
        type="password" 
        placeholder="请输入密码"
        style="width: 300px; margin-top: 10px;"
      ></Input>
      
      <Input 
        v-model="disabledInput" 
        placeholder="禁用输入框"
        disabled
        style="width: 300px; margin-top: 10px;"
      ></Input>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Button, Input } from './index'

const inputValue = ref('')
const password = ref('')
const disabledInput = ref('这是一个禁用的输入框')
</script>

<style scoped>
.app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.input-group {
  display: flex;
  flex-direction: column;
}

h2 {
  margin: 20px 0 10px 0;
  font-size: 18px;
  color: #333;
}
</style>
